<!doctype html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="from">
                <textarea id="formTxt" class="formTxt"></textarea>
            </div>
            <div class="center">
                <!-- <button class="translateBtn translate">翻&nbsp;译</button> -->
                <div class="custom">
                    <div>填写语言代码</div>
                    <div class="input">
                        <input id="input" class="inp" type="text">
                        <button class="translateBtn">翻&nbsp;译</button>
                    </div>
                </div>
            </div>
            <div class="from">
                <textarea id="toTxt" class="formTxt"></textarea>
            </div>
            <div class="tab">
                <table class="inner-html-table" border="0">
                    <thead>
                        <tr class="head" style="background-color: #f0f0f0;">
                            <th class="name">名称</th>
                            <th class="code">代码</th>
                            <th class="name">名称</th>
                            <th class="code">代码</th>
                            <th class="name">名称</th>
                            <th class="code">代码</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>自动检测</td>
                            <td>auto</td>
                            <td>中文</td>
                            <td>zh</td>
                            <td>英语</td>
                            <td>en</td>
                        </tr>
                        <tr>
                            <td>粤语</td>
                            <td>yue</td>
                            <td>文言文</td>
                            <td>wyw</td>
                            <td>日语</td>
                            <td>jp</td>
                        </tr>
                        <tr>
                            <td>韩语</td>
                            <td>kor</td>
                            <td>法语</td>
                            <td>fra</td>
                            <td>西班牙语</td>
                            <td>spa</td>
                        </tr>
                        <tr>
                            <td>泰语</td>
                            <td>th</td>
                            <td>阿拉伯语</td>
                            <td>ara</td>
                            <td>俄语</td>
                            <td>ru</td>
                        </tr>
                        <tr>
                            <td>葡萄牙语</td>
                            <td>pt</td>
                            <td>德语</td>
                            <td>de</td>
                            <td>意大利语</td>
                            <td>it</td>
                        </tr>
                        <tr>
                            <td>希腊语</td>
                            <td>el</td>
                            <td>荷兰语</td>
                            <td>nl</td>
                            <td>波兰语</td>
                            <td>pl</td>
                        </tr>
                        <tr>
                            <td>保加利亚语</td>
                            <td>bul</td>
                            <td>爱沙尼亚语</td>
                            <td>est</td>
                            <td>丹麦语</td>
                            <td>dan</td>
                        </tr>
                        <tr>
                            <td>芬兰语</td>
                            <td>fin</td>
                            <td>捷克语</td>
                            <td>cs</td>
                            <td>罗马尼亚语</td>
                            <td>rom</td>
                        </tr>
                        <tr>
                            <td>斯洛文尼亚语</td>
                            <td>slo</td>
                            <td>瑞典语</td>
                            <td>swe</td>
                            <td>匈牙利语</td>
                            <td>hu</td>
                        </tr>
                        <tr>
                            <td>繁体中文</td>
                            <td>cht</td>
                            <td>越南语</td>
                            <td>vie</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="./md5.js"></script>
    <script type="text/javascript">
        var appid = '20210111000668725';
        var key = 'hNeqDtpr8wma5fBphcJJ';
        var salt = (new Date).getTime();
        var from = 'zh';
        var to = '';
        $('.translateBtn').click(function () {
            var fromData = $('#formTxt').val();
            var code = $('#input').val();
            if (code) {
                to = code
            } else {
                to = 'en'
            }
            var formJson = '{' + fromData.substring(fromData.indexOf('"'), fromData.lastIndexOf('"') + 1) + '}';
            var jsonObj = JSON.parse(formJson);
            var zhStr = '';
            Object.keys(jsonObj).forEach(function (key) {
                zhStr = zhStr + '\n' + key
            });
            translateAPI(zhStr.substring(1));
        });
        function result(strData) {
            //var resultObj = {};
            let resultStr = "{\n\t";
            strData.forEach((item)=>{
				resultStr += `"${item.src}": "${item.dst}",\n\t`;
                //resultObj[item.src] = item.dst
            })
            if(resultStr.length > 0){
				resultStr = resultStr.replace(/,\n\t$/, '\n}')
            } else {
				resultStr += "}";
            }
            //var data = JSON.stringify(resultObj);            
            $('#toTxt').val(resultStr);
        };
        function translateAPI(value) {
            $.ajax({
                url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
                type: 'post',
                contentType: "application/x-www-form-urlencoded",
                dataType: 'jsonp',
                async: false,
                data: {
                    q: value,
                    appid: appid,
                    salt: salt,
                    from: from,
                    to: to,
                    sign: MD5(appid + value + salt + key)
                },
                success: function (data) {
                    console.log('api', data.trans_result)
                    result(data.trans_result)
                }
            });
        };
    </script>
</body>